<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 头部区域 -->
        <div class="header">
          <search-keyword
            :queryInfo="queryInfo"
            :options="searchOptions"
            @search="getUserList"
          />
          <el-button
            class="addBtn"
            type="success"
            size="mini"
            icon="el-icon-edit"
            @click="handelAdd"
          >新增用户</el-button>
        </div>
        <el-alert
          type="info"
          show-icon
        >
          <i slot="title"> 共 {{this.total}} 条数据</i>
        </el-alert>
        <!-- 表格区域 -->
        <el-table
          :data="userList"
          stripe
          :border="false"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="email"
            label="邮箱"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="联系电话"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="用户名"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="permission_group_title"
            label="权限组名称"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="role"
            label="角色"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- 编辑按钮 -->
              <el-button
                class="handleBtn"
                plain
                type="primary"
                icon="el-icon-edit"
                size="mini"
                circle
                @click="editUser(scope.row)"
              ></el-button>
              <!-- 删除按钮 -->
              <el-button
                class="handleBtn"
                plain
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                v-if="scope.row.status!='deleted'&&scope.row.id!==2"
                @click="removeUser(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <pagination
          :queryInfo="queryInfo"
          :total="total"
          @pagination="getUserList"
        />
      </el-card>
      <!-- 添加弹框 -->
      <user-add
        ref="addUser"
        :addForm="addForm"
        :permissionList="permissionList"
        @newData="loadUserList"
      ></user-add>
      <!-- 编辑弹框 -->
      <user-edit
        ref="editUser"
        :editForm="editForm"
        :permissionList="permissionList"
        :thatId="thatId"
        :editRow="editRow"
        @close="closeEditDialog"
      ></user-edit>
    </div>
  </div>
</template>

<script>
import { list as getList, remove as removeId } from '@/api/base/users.js'
import { list as getPermissionsList } from '@/api/base/permissions.js'
import UserAdd from '@/module-manage/components/user-add.vue'
import UserEdit from '@/module-manage/components/user-edit.vue'
import SearchKeyword from '@/module-manage/components/search.vue'
import Pagination from '@/module-manage/components/pagination.vue'
export default {
  name: 'base-users',
  data () {
    return {
      searchOptions: {
        placeholder: '根据用户名搜索', // 输入框内提示信息
        keyword: 'username'
      },
      queryInfo: {
        username: '', // 关键字
        page: 1, // 当前页码
        pagesize: 10 // 每页显示的条数
      },
      userList: [], // 用户列表数据
      total: 0, // 数据总条数
      addForm: {
        email: '',
        phone: '',
        username: '',
        password: '',
        role: '',
        permission_group_id: '',
        permission_group_title: '',
        avatar: '',
        introduction: ''
      }, // 添加表单数据对象
      permissionList: [], // 权限列表
      editDialogVisible: false,
      editForm: {
        email: '',
        phone: '',
        username: '',
        password: '',
        role: '',
        permission_group_id: '',
        permission_group_title: '',
        avatar: '',
        introduction: ''
      },
      thatId: 0,
      editRow: {}
    }
  },
  components: {
    UserAdd,
    UserEdit,
    SearchKeyword,
    Pagination
  },
  created () {
    // 渲染列表数据
    this.getUserList()
  },
  methods: {
    // 获取列表数据
    async getUserList () {
      const { data } = await getList(this.queryInfo)
      this.userList = data.list
      this.total = data.counts
      // console.log(data)
    },
    // 删除角色功能
    async  removeUser (id) {
      const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      // console.log(confirmResult)
      // console.log(id)
      if (confirmResult !== 'confirm') {
        return this.$message.info('取消删除')
      }
      await removeId({
        id
      })
      this.getUserList()
      this.$message.success('删除成功')
    },
    // 获取权限列表
    async getPermissionsList () {
      const { data } = await getPermissionsList({
        data: this.queryInfo
      })
      this.permissionList = data.list
    },
    // 新增用户按钮点击时
    handelAdd () {
      this.$refs.addUser.dialogShow()
      this.getPermissionsList()
    },
    // 增加功能完成
    loadUserList () {
      this.$refs.addUser.dialogHide()
      this.getUserList()
    },
    // 编辑按钮点击时
    editUser (row) {
      this.thatId = row.id
      this.editRow = row
      this.editForm = this.editRow
      console.log(this.editRow)
      // console.log(this.thatId)
      this.$refs.editUser.editDialogShow()

      this.getPermissionsList()
    },
    // 编辑功能完成
    closeEditDialog () {
      this.$refs.editUser.editDialogHide()
      this.getUserList()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .el-input {
      width: 200px;
      height: 36px;
      line-height: 36px;
    }
  }
  .el-button--mini {
    height: 36px;
  }
  .el-alert {
    margin-bottom: 20px;
    title {
      font-size: 13px;
      line-height: 18px;
    }
  }
  .handleBtn {
    width: 36px;
    height: 36px;
  }
}
</style>
